<!-- 合同管理-基础设置-合同状态设置 -->

<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="Contract-setting">
      <div
        class="Contract-setting-box"
        v-for="(item, index) in settingData"
        :key="index"
      >
        <div class="box_title_box">
          <span class="box_title_box_title">{{ item.setName }}</span>
        </div>
        <div>
          <a-space class="space">
            <a-button
              style="color: #000; margin-top: 10px"
              type="dashed"
              shape="round"
              size="large"
              @click="addItem(index)"
            >
              <template #icon>
                <icon-plus />
              </template>
              <template #default>新增来源</template>
            </a-button>
            <div
              class="space-box"
              v-for="(child, childIndex) in item.name"
              :key="childIndex"
            >
              <a-button
                style="margin-top: 10px"
                @click="deleteItem(child)"
                type="primary"
                shape="round"
                size="large"
              >
                <!-- Use the default slot to avoid extra spaces -->
                <template #default> {{ child.name }} </template>
                <template #icon>
                  <icon-delete />
                </template>
              </a-button>
            </div>
            <a-button
              v-if="item.isAddNewItem"
              type="primary"
              shape="round"
              size="large"
            >
              <template #default>
                <a-input
                  :style="{ width: '100px' }"
                  default-value=""
                  @change="addNewInputItem(index)"
                  v-model="newinput"
                >
                </a-input>
              </template>
              <template #icon>
                <icon-delete />
              </template>
            </a-button>
          </a-space>
        </div>
      </div>

      <a-modal
        :closable="false"
        v-model:visible="isAddForm"
        @cancel="formhandleCancel"
        :on-before-ok="formhandleBeforeOk"
        unmountOnClose
      >
        <template #title> 新增来源 </template>
        <div> 是否确定新增一个来源？ </div>
      </a-modal>

      <a-modal
        :closable="false"
        v-model:visible="isDeleteForm"
        @cancel="formDelhandleCancel"
        :on-before-ok="formDelhandleBeforeOk"
        unmountOnClose
      >
        <template #title> 删除来源 </template>
        <div> 是否确定删除一个来源？ </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import pageHeader from '@/components/page-header/index.vue';
  import {
    GetContractStateSetting,
    PostContractStateSettingItem,
    DeleteContractStateSettingItem,
  } from '@/api/contract-management/base-setting/state-contract/index';
  import { ContractStateSetting } from '@/types/contract';

  const title: string = '合同状态设置';

  const breadCrumb: string[] = ['合同管理', '基础设置', '合同状态设置'];
  /* 
  type: 1 合同状态设置
  前端写死
*/
  const settingData = reactive<Array<ContractStateSetting>>([
    {
      setName: '合同状态设置',
      name: [
        {
          name: '',
          id: -1,
        },
      ],
      isAddNewItem: false, // 判断用户是否点击新增来源按钮
      type: 1,
    },
  ]);

  // 获取 合同状态设置 基本信息
  const getContractSettingInfo = async () => {
    const res = await GetContractStateSetting();
    settingData[0].name = res.customerFrom;
    settingData[1].name = res.customerLevel;
    settingData[2].name = res.customerType;
  };

  getContractSettingInfo();

  // 点击新增来源按钮
  const addItem = (index: number) => {
    settingData[index].isAddNewItem = true;
  };

  let newinput = ref<string>(''); // 储存新增输入框内容

  let isAddForm = ref<boolean>(false); // 判断是否增加一个新的来源
  let currentAddiIndex = ref<number>(-1); // 判断当前是添加哪一个设置的item

  // 新增输入框触发的事件
  const addNewInputItem = (index: number) => {
    currentAddiIndex.value = index;
    isAddForm.value = true;
  };

  // 取消新增来源弹出框
  const formhandleCancel = () => {
    isAddForm.value = false;
    settingData[currentAddiIndex.value].isAddNewItem = false;
    newinput.value = '';
  };

  // 确定新增来源弹出框
  const formhandleBeforeOk = async () => {
    const data = {
      name: newinput.value,
      type: settingData[currentAddiIndex.value].type,
      setName: settingData[currentAddiIndex.value].setName,
    };
    try {
      await PostContractStateSettingItem(data);
      settingData[currentAddiIndex.value].isAddNewItem = false;
      newinput.value = '';
      isAddForm.value = false;
      getContractSettingInfo();
    } catch (error: unknown) {
      console.log(error);
    }
  };

  let isDeleteForm = ref<boolean>(false); // 判断删除来源对话框是否显示
  let currDelChildId = ref<number>(-1); // 获取当前要删除的子配置的id

  // 删除子配置
  const deleteItem = (child: any) => {
    isDeleteForm.value = true;
    currDelChildId.value = child.id;
  };

  // 确认删除子配置
  const formDelhandleBeforeOk = async () => {
    try {
      await DeleteContractStateSettingItem(currDelChildId.value);
      isDeleteForm.value = false;
      getContractSettingInfo();
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 取消删除子配置
  const formDelhandleCancel = () => {
    isDeleteForm.value = false;
  };
</script>

<style scoped lang="less">
  .Contract-setting {
    &-box {
      background-color: #fff;
      width: 100%;
      padding: 20px 20px;
      margin-bottom: 20px;

      .box_title_box {
        height: 40px;
        background-color: #f5f7fa;
        display: flex;

        &_title {
          line-height: 40px;
          font-weight: 700;
        }
      }

      .box_title_box::before {
        position: relative;
        top: 50%;
        left: 10px;
        display: inline-block;
        height: 20px;
        width: 5px;
        margin-right: 20px;
        border-radius: 2px;
        transform: translateY(-50%);
        content: '';
        background-color: #4e7cf7;
      }

      .space {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
</style>
